<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">这是二级路由</router-link>

    <router-link to="/about">关于</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
<keep-alive>
<router-view/>
  </keep-alive>

</div>
<script>
    var it
    // 1. 定义路由组件.
// 也可以从其他文件导入
const User = {
  template: `
    <div class="user">
        <div>二级路由</div>
      <router-link to="/profile">开启列表</router-link>
      <router-link to="/posts">展示信息</router-link>
    <keep-alive>
<router-view/>
  </keep-alive>
    </div>
  `,
}
const About = { template: '<div>关于</div>' }

const UserProfile = { template: `
    <div>睡觉</div>
    <div>吃饭</div>
    <div>学vue</div>
    <div>自定义列表</div>
    <input type="text" v-model="message" @keyup.enter="add" id="it">
    <input type="button" @click="add">
    ` ,
    methods: {
            add:function(){
                // alert(1)
                var it = document.getElementById('it').value
                alert(it)
                this.$router.push({
        name:'UserPosts ',
        params:{
          it:it
        }
      })
            
            }
        },
        params: {id:it}
    }
const UserPosts = { 
    template: `
    <div>在列表选择的内容是</div>
    <input type="button" @click="see">
    <span>{{this.$route.query.it }}</span>
    ` ,
    methods:{
        see:function(){
            alert( this.$route.query.id )
            var it =  this.$route.query.it 
            alert(it )
        }
        
        
        
    }
}
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { 
    path: '/', 
    component: User ,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: '/profile',
        component: UserProfile,
        props: true
        
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: '/posts/:it',
        component: UserPosts,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: '/posts',
        component: UserPosts,
      }]},
      
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
const app = Vue.createApp({

})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')


// 现在，应用已经启动了！
</script>
</body>
</html>